import React from 'react';
import { observer } from 'mobx-react-lite';
import { Icon } from 'choerodon-ui/pro/lib';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { message } from 'choerodon-ui/pro';
import { handleCopyOk } from '@/routes/continuous-deployment/utils';
import './index.less';

interface IProps {
  text: string
  triggerAddress: string
  token: string
  personalToken: string
}

const Index: React.FC<IProps> = (props) => {
  const {
    // @ts-ignore
    modal, text, token, triggerAddress, personalToken,
  } = props;
  const prefixCls = 'c7ncd-continuousDeployment-operation-curl';

  const handleOk = () => {
    message.success('复制成功');
    return true;
  };
  modal.handleOk(handleOk);

  return (
    <div className={prefixCls}>
      <div>curl -X POST \</div>
      <div>--fail \</div>
      <div>
        -F &quot;token=
        {token}
        &quot; \
      </div>
      <div>
        -F &quot;personal_token=
        {personalToken}
        &quot; \
      </div>
      <div className="triggerAddress">{triggerAddress}</div>
      <CopyToClipboard
        text={text}
        onCopy={handleCopyOk}
      >
        <Icon type="content_copy" />
      </CopyToClipboard>
    </div>
  );
};

export default observer(Index);
